const { Component } = React;
const { Alert, Input, Button, Card, Modal } = antd;

class HelloTo extends Component {
  state = {
    name: "Tim Black"
  };

  showModal = () => {
    Modal.info({
      title: "Hello",
      content: (
        <div>
          你好，{this.state.name} 现在的时间是： {new Date().toLocaleString()}
        </div>
      ),
      onOk() {}
    });
  };

  onChange = event => {
    this.setState({ name: event.target.value });
  };

  render() {
    return (
      <Card title={"Hello To " + this.state.name} style={{ width: 500 }}>
        <Alert message={"你好 ," + this.state.name} type="success" />
        <Input
          placeholder="请输入你的名字"
          value={this.state.name}
          onChange={this.onChange}
        />
        <Button type="primary" onClick={this.showModal}>
          弹出消息
        </Button>
      </Card>
    );
  }
}
